<script setup lang="ts">
import TopCategoryItem from './components/TopCategoryItem.vue'
import type { CategoryVO } from '@/types/vo/CategoryVO'
import {
  getArticleList,
  getCategoryList,
  getSubCategoryAndTag,
} from '@/apis/front/article'
import type { ArticleQuery } from '@/types/query/ArticleQuery'
import type { ArticleVO } from '@/types/vo/ArticleVO'
import type { LabelVO } from '@/types/vo/LabelVO'
import ArticleItem from '@/components/ArticleItem.vue'

// 一级分类
const firstCategoryList = ref<CategoryVO[]>([])
// 选中的一级分类Id
const activeFirstCategoryId = ref<number>()
// 获取一级分类
const getFirstCategory = async () => {
  const res = await getCategoryList({
    categoryType: 0,
  })
  firstCategoryList.value = res.data.data
  activeFirstCategoryId.value = firstCategoryList.value[0].id
}

//激活的标签Id
const activeLabel = ref<LabelVO>({
  id: 0,
})
// 二级分类
const secondCategoryList = ref<CategoryVO[]>([])
// 获取二级分类及标签并激活标签
const getSecondCategoryAndLabel = async (id?: number) => {
  const res = await getSubCategoryAndTag(id)
  secondCategoryList.value = res.data.data
  // 找到第一个标签并激活
  const labelLists = secondCategoryList.value.map(item => item.labelList)
  // 一维化
  const labelListsFlat = labelLists.flat()
  if (labelListsFlat.length > 0) {
    activeLabel.value = labelListsFlat[0]!
  }
  // // 确定标签后设置查询参数并清空数据
  // articleList.value = []
  // queryParams.value.pageSize = 10
  // queryParams.value.pageNum = 1
  // queryParams.value.labelId = activeLabelId.value
}

const queryParams = ref<ArticleQuery>({
  pageNum: 1,
  pageSize: 10,
  reviewStatus: 1,  
})
const articleList = ref<ArticleVO[]>([])

const gatArticle = async () => {
  if (noMore.value) return
  loading.value = true
  try {
    const res = await getArticleList(queryParams?.value)
    articleList.value.push(...res.data.data.records)
    if (res.data.data.records.length < queryParams.value.pageSize!) noMore.value = true
  } finally {
    loading.value = false
  }
}

const noMore = ref(false)
const loading = ref(false)

const handleFirstCategoryClick = async (category: CategoryVO) => {
  activeFirstCategoryId.value = category.id
  // 获取二级分类及标签并激活标签
  await getSecondCategoryAndLabel(category.id)
}
const handleLabelClick = async (label: LabelVO) => {
  activeLabel.value = label
}

watch(
  () => activeLabel.value,
  async () => {
    if (activeLabel.value) {
      // 重置查询参数并清空数据
      articleList.value = []
      queryParams.value.pageSize = 10
      queryParams.value.pageNum = 1
      queryParams.value.labelId = activeLabel.value.id
      noMore.value = false
      await gatArticle()
    }
  },
)

const handleLoad = async () => {
  if(noMore.value || loading.value){
    return
  }
  queryParams.value.pageNum = queryParams.value.pageNum
    ? queryParams.value.pageNum + 1
    : 1
  await gatArticle()
}

onMounted(async () => {
  await getFirstCategory()
  await getSecondCategoryAndLabel(activeFirstCategoryId.value)
})
</script>
<template>
  <div class="w-full h-full flex gap-20px">
    <div
      class="left  pt-6px h-full w-140px bg-white rounded-2 flex flex-col overflow-auto items-center"
    >
      <TopCategoryItem
        v-for="(item, idx) in firstCategoryList"
        :key="item.id"
        :active-id="activeFirstCategoryId"
        :category-info="item"
        :index="idx"
        :callback="handleFirstCategoryClick"
      />
    </div>
    <div class="h-full rounded-2 flex-1 overflow-y-auto flex flex-col gap-2px">
      <div class="rounded-t-8px w-full bg-white px-24px pt-24px pb-6px">
        <div
          class="flex py-5px items-center"
          v-for="item in secondCategoryList"
          :key="item.id"
        >
          <div class="w-115px">
            <span class="font-size-14px c-#333 font-700"
              >{{ item.categoryName }}:</span
            >
          </div>
          <div class="flex gap-20px">
            <tag
              class="ml-5px"
              :label-info="label"
              :active-label="activeLabel"
              v-for="label in item.labelList"
              :key="label.id"
              :click-callback="handleLabelClick"
            >
            </tag>
          </div>
        </div>
      </div>
      <div class="flex-1 bg-white px-24px pt-24px pb-6px overflow-y-auto">
        <n-infinite-scroll
          style="height: 100%"
          :distance="10"
          @load="handleLoad"
          :scrollbar-props="{
            trigger: 'hover',
            size: 0,
          }"
          v-if="!loading || articleList.length"
        >
          <div v-for="item in articleList" :key="item.id" class="item mr-6px">
            <ArticleItem :Article="item" :Label="activeLabel" />
          </div>
          <div class="flex justify-center">
            <div v-if="loading" class="text">加载中...</div>
            <div v-if="noMore" class="text">没有更多了 🤪</div>
          </div>
        </n-infinite-scroll>
        <div
          v-else
          class="flex-1 bg-white px-24px pt-24px pb-6px overflow-y-auto"
        >
          <n-skeleton text :repeat="20" />
        </div>
      </div>
    </div>
    <div class="h-full flex flex-col gap-5px w-250px">
      <UserCard />
      <RecommendCard />
    </div>
  </div>
</template>
<style lang="scss" scoped>
::-webkit-scrollbar {
  display: none;
}
</style>
